<template>
  <div class="Distribution-box">
    <div ref="target" class="content"></div>
  </div>
</template>
<script setup>
import * as echarts from "echarts";
import {onMounted, ref} from "vue";

import china from "@/assets/MapData/china.json"; //中国地图

echarts.registerMap("china", china);

const props = defineProps({
  // data: {
  //     type: Object,
  //     required: true,
  // },

});
let target = ref(null);
let myChart = null;
onMounted(() => {
  myChart = echarts.init(target.value);
  renderChart();
});
// watch(
//   () => props.data,
//   () => {
//     renderChart();
//   }
// );

var img2 = 'image://';
var mapName = 'china';
var data = [
  {name: '北京', value: 5},
  {name: '天津', value: 14},
  {name: '河北', value: 157},
  {name: '山西', value: 110},
  {name: '内蒙古', value: 40},
  {name: '辽宁', value: 40},
  {name: '吉林', value: 40},
  {name: '黑龙江', value: 60},
  {name: '上海', value: 10},
  {name: '江苏', value: 60},
  {name: '浙江', value: 50},
  {name: '安徽', value: 151},
  {name: '福建', value: 60},
  {name: '江西', value: 74},
  {name: '山东', value: 200},
  {name: '河南', value: 100},
  {name: '湖北', value: 40},
  {name: '湖南', value: 50},
  {name: '重庆', value: 40},
  {name: '四川', value: 120},
  {name: '贵州', value: 135},
  {name: '云南', value: 90},
  {name: '西藏', value: 25},
  {name: '陕西', value: 100},
  {name: '甘肃', value: 60},
  {name: '青海', value: 20},
  {name: '宁夏', value: 110},
  {name: '新疆', value: 32},
  {name: '广东', value: 10},
  {name: '广西', value: 100},
  {name: '海南', value: 40},
];


/*var toolTipData = [
    {
        name: '南阳',
        value: 100,
    },
    {
        name: '郑州',
        value: 3,
    },
    {
        name: '山东',
        value: 80,
    },
    {
        name: '北京',
        value: 35,
    },
    {
        name: '武汉',
        value: 27,
    },
    {
        name: '深圳',
        value: 13,
    },
    {
        name: '新疆',
        value: 5,
    },
    {
        name: '兰州',
        value: 74,
    }
];*/
var toolTipData = [
  {
    name: '陕西',
    value: 100,
  },
  {
    name: '河南',
    value: 3,
  },
  {
    name: '山东',
    value: 80,
  },
  {
    name: '安徽',
    value: 35,
  },
  {
    name: '江苏',
    value: 27,
  },
  {
    name: '湖南',
    value: 13,
  },
  {
    name: '广东',
    value: 5,
  }
];
var geoCoordMap = {
  "新疆": [87.611053, 43.828171],
  "南阳": [112.567695, 32.996438],
  '郑州': [113.627316, 34.741405],
  "山东": [117.1582, 36.8701],
  '北京': [116.409136, 39.904665],
  "武汉": [114.30525, 30.587629],
  "深圳": [114.057595, 22.537355],
  "兰州": [103.834228, 36.055979],

  "河北": [114.4995, 38.1006],
  "天津": [117.4219, 39.4189],
  "山西": [112.3352, 37.9413],
  "陕西": [109.1162, 34.2004],
  "甘肃": [103.5901, 36.3043],
  "宁夏": [106.3586, 38.1775],
  "青海": [101.4038, 36.8207],
  "西藏": [91.117212, 29.646922],
  "四川": [103.9526, 30.7617],
  "重庆": [108.384366, 30.439702],
  "江苏": [118.8062, 31.9208],
  "安徽": [117.29, 32.0581],
  "湖北": [114.3896, 30.6628],
  "浙江": [119.5313, 29.8773],
  "福建": [119.4543, 25.9222],
  "江西": [116.0046, 28.6633],
  "湖南": [113.0823, 28.2568],
  "贵州": [106.6992, 26.7682],
  "云南": [102.9199, 25.4663],
  "广东": [113.12244, 23.009505],
  "广西": [108.479, 23.1152],
  "海南": [110.3893, 19.8516],
  "台湾": [120.702967, 24.123621],
  '上海': [121.4648, 31.2891]
};

/*获取地图数据*/
// myChart.showLoading();
var mapFeatures = echarts.getMap(mapName).geoJson.features;
// myChart.hideLoading();
mapFeatures.forEach(function (v) {
  // 地区名称
  var name = v.properties.name;
  // 地区经纬度
  geoCoordMap[name] = v.properties.cp;
});

var convertData = function (data) {
  var res = [];
  for (var i = 0; i < data.length; i++) {
    var geoCoord = geoCoordMap[data[i].name];
    if (geoCoord) {
      res.push({
        name: data[i].name,
        value: geoCoord.concat(data[i].value),
      });
    }
  }
  return res;
};

// 柱状体的主干
function lineData() {
  return toolTipData.map((item) => {
    return {
      coords: [geoCoordMap[item.name], [geoCoordMap[item.name][0], geoCoordMap[item.name][1] + 1.5]]
    }
  })
}

// 柱状体的顶部
function scatterData() {
  return toolTipData.map((item) => {
    return [geoCoordMap[item.name][0], geoCoordMap[item.name][1] + 2, item]
  })
}

let option = {
  title: {
    show: true,
    x: 'center',
    top: "10",
    textStyle: {
      color: "#fff",
      fontFamily: "等线",
      fontSize: 18,
    },
  },
  tooltip: {
    trigger: 'none',
    formatter: function (params) {
      if (typeof params.value[2] == 'undefined') {
        var toolTiphtml = '';
        for (var i = 0; i < toolTipData.length; i++) {
          if (params.name == toolTipData[i].name) {
            toolTiphtml += toolTipData[i].name + "：" + toolTipData[i].value;
          }
        }
        console.log(toolTiphtml);
        // console.log(convertData(data))
        return toolTiphtml;
      } else {
        var toolTiphtml = '';
        for (var i = 0; i < toolTipData.length; i++) {
          if (params.name == toolTipData[i].name) {
            toolTiphtml += toolTipData[i].name + "：" + toolTipData[i].value;
          }
        }
        console.log(toolTiphtml);

        return toolTiphtml;
      }
    },
    backgroundColor: "#fff",
    borderColor: "#333",
    padding: [5, 10],
    textStyle: {
      color: "#333",
      fontSize: "16"
    }
  },
  geo: [{
    layoutCenter: ['50%', '50%'],//位置
    layoutSize: '180%',//大小
    show: true,
    map: mapName,
    roam: false,
    zoom: 0.9,
    aspectScale: 1,
    label: {
      show: false,
      color: '#fff',
    },
    emphasis: {
      show: true,
      color: '#fff'
    },
    itemStyle: {
      areaColor: {
        type: "linear",
        x: 1200,
        y: 0,
        x2: 0,
        y2: 0,
        colorStops: [{
          offset: 0,
          color: "rgba(3,27,78,0.75)", // 0% 处的颜色
        }, {
          offset: 1,
          color: "rgba(58,149,253,0.75)", // 50% 处的颜色
        },],
        global: true, // 缺省为 false
      },
      borderColor: "#c0f3fb",
      borderWidth: 1,
      shadowColor: "#010D3A",
      shadowOffsetY: 10,
      shadowBlur: 20,
    },
    emphasis: {
      areaColor: "rgba(0,254,233,0.6)",
      // borderWidth: 0
    }
  }, {
    type: "map",
    map: mapName,
    zlevel: -1,
    aspectScale: 1,
    zoom: 0.9,
    layoutCenter: ["50%", "51%"],
    layoutSize: "180%",
    roam: false,
    silent: true,
    itemStyle: {
      borderWidth: 1,
      // borderColor:"rgba(17, 149, 216,0.6)",
      borderColor: "rgba(58,149,253,0.8)",
      shadowColor: "rgba(172, 122, 255,0.5)",
      shadowOffsetY: 5,
      shadowBlur: 5,
      areaColor: "rgba(5,21,35,0.1)",
    },
  }, {
    type: "map",
    map: mapName,
    zlevel: -2,
    aspectScale: 1,
    zoom: 0.9,
    layoutCenter: ["50%", "52%"],
    layoutSize: "180%",
    roam: false,
    silent: true,
    itemStyle: {
      borderWidth: 1,
      // borderColor: "rgba(57, 132, 188,0.4)",
      borderColor: "rgba(58,149,253,0.6)",
      shadowColor: "rgba(65, 214, 255,1)",
      shadowOffsetY: 5,
      shadowBlur: 5,
      areaColor: "transpercent",
    },
  }, {
    type: "map",
    map: mapName,
    zlevel: -3,
    aspectScale: 1,
    zoom: 0.9,
    layoutCenter: ["50%", "53%"],
    layoutSize: "180%",
    roam: false,
    silent: true,
    itemStyle: {
      borderWidth: 1,
      // borderColor: "rgba(11, 43, 97,0.8)",
      borderColor: "rgba(58,149,253,0.4)",
      shadowColor: "rgba(58,149,253,1)",
      shadowOffsetY: 5,
      shadowBlur: 5,
      areaColor: "transpercent",
    },
  }, {
    type: "map",
    map: mapName,
    zlevel: -4,
    aspectScale: 1,
    zoom: 0.9,
    layoutCenter: ["50%", "54%"],
    layoutSize: "180%",
    roam: false,
    silent: true,
    itemStyle: {
      borderWidth: 5,
      // borderColor: "rgba(11, 43, 97,0.8)",
      borderColor: "rgba(5,9,57,0.8)",
      shadowColor: "rgba(29, 111, 165,0.8)",
      shadowOffsetY: 5,
      shadowBlur: 5,
      areaColor: "rgba(5,21,35,0.1)",
    },
  },],
  series: [
    {
      type: 'map',
      map: mapName,
      geoIndex: 0,
      aspectScale: 1,//长宽比
      zoom: 0.9,
      showLegendSymbol: true,
      roam: true,
      label: {
        show: true,
        color: "#fff",
        fontSize: "120%",
      },
      emphasis: {
        // show: false,
      },
      itemStyle: {
        areaColor: {
          type: "linear",
          x: 1200,
          y: 0,
          x2: 0,
          y2: 0,
          colorStops: [{
            offset: 0,
            color: "rgba(3,27,78,0.75)", // 0% 处的颜色
          }, {
            offset: 1,
            color: "rgba(58,149,253,0.75)", // 50% 处的颜色
          },],
          global: true, // 缺省为 false
        },
        borderColor: "#fff",
        borderWidth: 0.2,
      },
      layoutCenter: ["50%", "50%"],
      layoutSize: "180%",
      animation: false,
      markPoint: {
        symbol: "none"
      },
      data: data,
    },
    //柱状体的主干
    {
      type: 'lines',
      zlevel: 5,
      effect: {
        show: false,
        symbolSize: 5 // 图标大小
      },
      lineStyle: {
        width: 6, // 尾迹线条宽度
        color: 'rgba(249, 105, 13, .6)',
        opacity: 1, // 尾迹线条透明度
        curveness: 0 // 尾迹线条曲直度
      },
      label: {
        show: 0,
        position: 'end',
        formatter: '245'
      },
      silent: true,
      data: lineData()
    },
    // 柱状体的顶部
    {
      type: 'scatter',
      coordinateSystem: 'geo',
      geoIndex: 0,
      zlevel: 5,
      label: {
        show: true,
        formatter: function (params) {
          var name = params.data[2].name
          var value = params.data[2].value
          var text = `{tline|${name}}`
          // var text = `{tline|${name}} : {fline|${value}}万`
          // var text = `{tline|项目个数} : {fline|${value}}`
          return text;
        },
        color: '#fff',
        rich: {
          fline: {
            // padding: [0, 25],
            color: '#fff',
            fontSize: 14,
            fontWeight: 600
          },
          tline: {
            // padding: [0, 27],
            color: '#ABF8FF',
            fontSize: 12,
          },
        },
      },
      emphasis: {
        show: true
      },
      itemStyle: {
        color: '#00FFF6',
        opacity: 1
      },
      symbol: img2,
      symbolSize: [90, 50],
      symbolOffset: [0, -20],
      z: 999,
      data: scatterData(),
    },
    {
      name: 'Top5',
      type: 'effectScatter',
      coordinateSystem: 'geo',
      data: convertData(toolTipData),
      showEffectOn: 'render',
      itemStyle: {
        color: '#00FFFF',
      },
      rippleEffect: {
        scale: 5,
        brushType: 'stroke',
      },
      label: {
        formatter: '{b}',
        position: 'bottom',
        show: false,
        color: "#fff",
        distance: 10,
      },
      symbol: 'circle',
      symbolSize: [20, 10],
      itemStyle: {
        color: '#16ffff',
        shadowBlur: 10,
        shadowColor: '#16ffff',
        opacity: 1
      },
      zlevel: 4,
    },
  ],
};


const renderChart = () => {
  myChart.setOption(option);

  // 图表自适应
  window.addEventListener('resize', () => {
    myChart.resize()
  })
};
</script>
<style lang='scss' scoped>
.Distribution-box {
  width: 100%;
  height: 100%;
  cursor: pointer;

  .content {
    width: 100%;
    height: 100%;
  }
}
</style>
